<template>
    <!-- 每一个小面板结构都是一样的一个标题,一个图表,所以可以封装成一个组件增加复用性 -->
    <div class="panel">
        <!-- 标题 -->
        <h2 class="title">

            <div>
                <slot name="title"></slot>
            </div>
            <!-- 年份 专属定制-->
            <div v-show='isHasYear'>
                <slot name="year"></slot>
            </div>
        </h2>
        <!-- 图表 -->
        <div class="chart" ref='chart'></div>
        <div class="panel-footer"></div>
    </div>
</template>

<script>
    export default {
        name: 'Panel',
        //父组件传过来的echarts数据源
        props: {
            options: {
                type: Object,
            },
            isHasYear: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.options && this.init()
            window.addEventListener('resize', () => {
                this.chart.resize()
            })
        },
        methods: {
            init() {
                //2.初始化
                this.chart = this.$Echarts.init(this.$refs.chart)
                //3.配置数据
                let option = this.options
                // 4.传入数据
                this.chart.setOption(option)
            },
        },
        //echarts数据源的数据变了,就要重新对echats初始化重新获得图表
        watch: {
            options: {
                handler() {
                    this.init()
                },
                deep: true
            }
        }
    }
</script>

<style lang="less" scoped>
    .panel {
        height: 30%;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background-image: url('~assets/images/line(1).png');
        padding: 0px .1875rem .5rem .1875rem;
        margin-bottom: .1875rem;
        position: relative;
        box-sizing: border-box;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: .125rem;
            height: .125rem;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
        }

        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: .125rem;
            height: .125rem;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
        }

        .panel-footer {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: .125rem;
                height: .125rem;
                border-bottom: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
            }

            &::after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                width: .125rem;
                height: .125rem;
                border-bottom: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
            }
        }

        .title {
            font-size: 16px;
            height: .6rem;
            text-align: center;
            line-height: .6rem;
            color: #fff;
            font-weight: normal;
            display: flex;

            div:nth-child(1) {
                flex: 1;
                text-align: center;
            }

            div:nth-child(2) {
                flex: 1;
                display: flex;
                justify-content: space-evenly;
            }
        }

        .chart {
            height: 77%;
        }
    }
</style>